<template>
  <div @click="drawerTag = true">
    <AButton v-if="rows.length < 1">参数配置</AButton>
    <div v-else>
      <template v-for="row in rows" :key="row.name">
        <a-tag :color="ToolRandom_randomColor()">{{row.name}}</a-tag>
      </template>
    </div>
  </div>
  <a-drawer
      v-model:visible="drawerTag"
      size="large"
      title="请选择"
      placement="right"
  >
    <template v-for="(row, _index) in rows" :key="_index">
      <ARow :gutter="10" style="margin-bottom: 20px;">
        <ACol :span="6">
          <AInput v-model:value="row.name" placeholder="请输入参数"></AInput>
        </ACol>
        <ACol :span="6">
          <AInput v-model:value="row.code" placeholder="请输入code"></AInput>
        </ACol>
        <ACol :span="6">
          <a-select
              v-model:value="row.dataType"
              style="width: 100%"
              :options="dataTypes.map(item => ({ label: item.name, value: item.val }))"
              placeholder="请选择类型"
          ></a-select>
        </ACol>
        <ACol :span="6">
          <AButton style="margin-right: 10px;" @click="update(row)">
            <template #icon><SaveOutlined /></template>
          </AButton>
          <AButton style="margin-right: 10px;" @click="remove(row.id)">
            <template #icon><DeleteOutlined /></template>
          </AButton>
        </ACol>
      </ARow>
    </template>
    <ARow :gutter="10">
      <ACol :span="6">
        <AInput v-model:value="newRow.name" placeholder="请输入参数"></AInput>
      </ACol>
      <ACol :span="6">
        <AInput v-model:value="newRow.code" placeholder="请输入code"></AInput>
      </ACol>
      <ACol :span="6">
        <a-select
            v-model:value="newRow.dataType"
            style="width: 100%"
            :options="dataTypes.map(item => ({ label: item.name, value: item.val }))"
            placeholder="请选择类型"
        ></a-select>
      </ACol>
      <ACol :span="6">
        <AButton style="margin-right: 10px;" @click="handleAdd">
          <template #icon><SaveOutlined /></template>
        </AButton>
      </ACol>
    </ARow>
  </a-drawer>
</template>
<script setup>
import {ref, defineProps} from 'vue';
import { SaveOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
import {enumDataType} from '@/config/api/api-enums';
import use from "../useComponent";
const props = defineProps({
  defaultIds: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:defaultIds', 'ntdChange']);

const dataTypes = ref([]);
const drawerTag = ref(false);
const newRow = ref({});

const { rows, remove, update } = use({
    queryParam: { __rules: { 'id__in': (props.defaultIds || []).join(',') }
}}, 'common', 'param', (rowsWatch) => {
  emit('update:defaultIds', rowsWatch.map(row => row.id));
  emit('ntdChange', rowsWatch.map(row => row.id));
});

enumDataType().then(res => {
  dataTypes.value = res;
})

const handleAdd = async () => {
  await update(newRow.value);
  newRow.value = {};
}

</script>

